import React from 'react';
import { List, Card, Tag } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const NewsList: React.FC = () => {
  const newsItems = [
    {
      id: 1,
      title: 'ChatGPT推出新功能：支持多模态输入',
      summary: 'OpenAI宣布ChatGPT现在支持图片和语音输入，进一步提升了AI助手的交互能力...',
      time: '10分钟前',
      tags: ['ChatGPT', '多模态'],
      image: 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=400&q=80'
    },
    {
      id: 2,
      title: '微软发布Copilot Pro，AI助手进入企业市场',
      summary: '微软推出面向企业的AI助手服务，集成Office全家桶，提升办公效率...',
      time: '30分钟前',
      tags: ['微软', '企业服务'],
      image: 'https://images.unsplash.com/photo-1461344577544-4e5dc9487184?auto=format&fit=crop&w=400&q=80'
    },
    {
      id: 3,
      title: 'AI芯片巨头英伟达发布新一代GPU',
      summary: '英伟达发布新一代AI训练芯片，性能提升显著，进一步推动AI发展...',
      time: '1小时前',
      tags: ['芯片', '英伟达'],
      image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=400&q=80'
    }
  ];

  return (
    <Card title="最新资讯" bordered={false}>
      <List
        itemLayout="vertical"
        dataSource={newsItems}
        renderItem={item => (
          <List.Item>
            <Card hoverable>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <img src={item.image} alt={item.title} style={{ width: 80, height: 60, objectFit: 'cover', marginRight: 16, borderRadius: 4 }} />
                <div style={{ flex: 1 }}>
                  <h3>
                    <Link to={`/news/${item.id}`} style={{ color: '#1677ff' }}>{item.title}</Link>
                  </h3>
                  <p>{item.summary}</p>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                      {item.tags.map(tag => (
                        <Tag key={tag} color="blue">{tag}</Tag>
                      ))}
                    </div>
                    <span>
                      <ClockCircleOutlined style={{ marginRight: 8 }} />
                      {item.time}
                    </span>
                  </div>
                </div>
              </div>
            </Card>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default NewsList; 